<template>
<div class="bill">
  <h1 style="color: #ffffff ; letter-spacing: 0.1em">账单记录</h1>
  <el-table
      :data="tableData
      .filter(data => !search || data.id.includes(search)||data.date.includes(search))"
      style="width: 100%;" highlight-current-row

  >
    <el-table-column label="账单id" prop="id" align="center" :sortable="true"> </el-table-column>
    <el-table-column label="日期" prop="date" align="center" :sortable="true"> </el-table-column>
    <el-table-column label="总费用(RMB)" prop="cost" align="center"> </el-table-column>
    <el-table-column align="center">
      <template #header>
        <el-input v-model="search"  placeholder="输入关键字搜索" style="width: 250px;height: 60px;"/>
      </template>
      <template #default="scope">
        <el-button size="mini" type="primary" @click="showBill(scope)"
        >详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination layout="prev, pager, next ,sizes,jumper" :total="page.total" background
                   :page-sizes="sizes" :current-page="page.current" prev-text="上一页" next-text="下一页" :page-size="page.size"
                   @size-change="changeSize" @current-change="changePage"
    > </el-pagination>
  </div>
  <transition name="billAnime">
    <el-card :shadow="true" class="bill_info" v-show="billInfoShow">
      <template #header>
        <div class="card-header">
          <span style="color: #00a4ff;cursor: default">账单详情</span>
        </div>
      </template>
      <div>
        <el-descriptions direction="vertical" :column="5" border >
          <el-descriptions-item label="日期" label-align="center" align="center">{{ selectBill.billDate }}</el-descriptions-item>
          <el-descriptions-item label="账单id" label-align="center" align="center">{{selectBill.id}}</el-descriptions-item>
          <el-descriptions-item label="费用(RMB)" label-align="center" align="center">{{selectBill.total}}</el-descriptions-item>
          <el-descriptions-item label="挂号费" label-align="center" align="center">
            <span v-if="selectBill.appoPrice!=null">
              已缴
            </span>
            <span v-else>未缴</span>
          </el-descriptions-item>
          <el-descriptions-item label-align="center" label="材料费" align="center">
             <span v-if=" selectBill.price===null ">
              无
            </span>
            <span v-else-if="selectBill.billDate === null">
              未缴
            </span>
            <span v-else>已缴</span>
          </el-descriptions-item>
          <el-descriptions-item label="明细" align="left" label-align="center" :span="4">
            <div style="display: flex;align-items: center;justify-content: space-between" >
              <el-tag effect="plain" v-if="selectBill.appoPrice !== null">挂号费</el-tag>
              <el-divider></el-divider>
              <span>¥{{selectBill.appoPrice}}</span>
            </div>
            <div style="display: flex;align-items: center;justify-content: space-between">
              <el-tag effect="plain">材料费</el-tag>
              <el-divider></el-divider>
              <span v-if="selectBill.price!==null">¥{{selectBill.price}}</span>
              <span v-else>无</span>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="btn-contain">
        <el-button class="hvr-push" type="success" @click="pay(selectBill.id)" v-if="selectBill.billDate===null">缴费</el-button>
        <el-button id="confirm_btn" class="hvr-pulse" type="primary" @click="billInfoShow=false">返回</el-button>
      </div>
    </el-card>
  </transition>
</div>
</template>

<script>
import {getBills, payBill} from "../../api/api";
import {ElMessage} from "element-plus";

export default {
  name: "BillPage",
  mounted(){
    let page = {
      page: this.page.current,
      size: this.page.size
    }
    let header = {
      satoken: localStorage.getItem('satoken')
    }
    this.detailedData.length=0
    this.tableData.length = 0
    getBills(page,header).then(res=>{
      //console.log(res)
      //存入detailed中
      this.detailedData = res.records
      let data = {
        id:'',
        date:'',
        cost:'',
      }
      res.records.forEach(value=>{
        if (value.billDate!==null){
          data = {
            id: value.id,
            date: this.$moment(value.billDate).format('YYYY MMM Do,h:mm:ss'),
            cost: value.price + value.appoPrice
          }
        }
        else{
          data = {
            id: value.id,
            date: '',
            cost: value.price + value.appoPrice
          }
        }
        this.tableData.push(data)
      })
      this.page.total = res.total
    })
    .catch(err=>{
      console.log(err)
      ElMessage.error({
        type: 'error',
        message: '账单获取失败'
      })
    })
  },
  methods:{
    pay(id){
      if (this.selectBill.price === null){
        ElMessage.warning({
          type:'warning',
          message:'正在计算材料费！请稍后再缴费!'
        })
        return -1
      }
      if (this.selectBill.billDate!==null||this.selectBill.billDate!==''){
        ElMessage.warning({
          type:'warning',
          message:'当前账单无需缴费'
        })
        return -1
      }

      payBill({
        id: id
      },{
        "satoken": localStorage.getItem("satoken")
      }).then(res=>{

        if (res.code === '200'){
          ElMessage.success({
            type: 'success',
            message: res.msg
          })
        }else{
          ElMessage.warning({
            type: 'warning',
            message: res.msg
          })
        }
      }).catch(err=>{
        console.log(err)
        ElMessage.error({
          type: 'error',
          message: err
        })
      })
    },
    changePage(value){
      this.tableData.length = 0
      this.detailedData.length=0
      getBills({
        page: value,
        size: this.page.size
      },{
        satoken: localStorage.getItem('satoken')
      }).then(res=>{
        this.detailedData = res.records
        res.records.forEach(value=>{
          let data = {
            id: value.id,
            date: this.$moment(value.billDate).format('YYYY MMMM Do,h:mm:ss a'),
            cost: value.price + value.appoPrice
          }

          this.tableData.push(data)
        })
      }).catch(err=>{
        console.log(err)
        ElMessage.error({
          type: 'error',
          message: '账单获取失败'
        })
      })
    },

    changeSize(value){
      this.page.size = value
      getBills({
        page: this.page.current,
        size: value
      },{
        satoken: localStorage.getItem('satoken')
      }).then(res=>{
        this.tableData.length = 0
        this.detailedData.length=0
        this.detailedData = res.records
        res.records.forEach(value=>{
          let data = {
            id: value.id,
            date: this.$moment(value.billDate).format('YYYY MMMM Do,h:mm:ss a'),
            cost: value.price + value.appoPrice
          }
          console.log(data)
          this.tableData.push(data)
        })
      }).catch(err=>{
        console.log(err)
        ElMessage.error({
          type: 'error',
          message: '账单获取失败'
        })
      })
    },

    showBill(scope){
      this.detailedData.forEach(value => {
        if (scope.row.id === value.id){
          this.selectBill = value
          //this.selectBill.billDate = value.billDate=== null ? '':this.$moment(value.billDate).format('YYYY MMM Do,h:mm:ss')
          this.selectBill.total = value.price  + value.appoPrice
        }
      })
      //传入账单id,显示账单详情
      this.billInfoShow = true
    },

  },
  data(){
    return{

      page:{
        total: 10,
        current: 1,
        size: 5,
      },
      sizes: [1,2,5,8,10],
      detailedData:[],
      selectBill: {},

      bill:[

      ],
      billInfoShow: false,
      search: '',
      tableData:[

      ],

    }
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
}
</script>

<style scoped>
.billAnime-enter-active{
  animation: fadeIn 0.5s;
}
.billAnime-leave-active{
  animation: fadeOut 0.5s;
}
.bill_info{
  position: absolute;
  width: 650px;
  height: auto;
  top: 15%;
  left: 30%;
}
.bill{
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 600px;
}
.block{
  margin-top: 20px;
  background: rgba(255,255,255,.8);

}

.btn-contain{
  margin-top: 20px;
}
::v-deep(.el-table tr){

  font-size: 20px;
}
</style>
